<template>
  <div class="contractAward_info">
    <div style="padding: 10px 0 20px">
      <el-form
        ref="contractAwardRef"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <el-card
          class="box-card"
          shadow="always"
          style="background: #fafafa; margin-top: 20px"
        >
          <template #header>
            <div class="card-header" style="padding-bottom: 4px">
              <span style="font-weight: 600">合同内容</span>
            </div>
          </template>
          <el-row style="padding: 10px 40px">
            <el-col :span="12">
              <el-form-item label="合同编号:" prop="contractCode">
                <el-input
                  v-model="form.contractCode"
                  placeholder="请输入合同编号"
                  :disabled="true"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="签订时间:" prop="signTime">
                <el-date-picker
                  :disabled="true"
                  v-model="form.signTime"
                  style="width: 70%"
                  type="date"
                  placeholder="选择签订时间"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同开始时间:" prop="beginTime">
                <el-date-picker
                  :disabled="true"
                  v-model="form.beginTime"
                  style="width: 70%"
                  type="date"
                  placeholder="选择合同开始时间"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同结束时间:" prop="endTime">
                <el-date-picker
                  :disabled="true"
                  v-model="form.endTime"
                  style="width: 70%"
                  type="date"
                  placeholder="选择合同结束时间"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="甲方:" prop="partyA">
                <el-input
                  v-model="form.partyA"
                  placeholder="请输入甲方"
                  style="width: 70%"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="乙方:" prop="partyB">
                <el-input
                  v-model="form.partyB"
                  placeholder="请输入乙方"
                  style="width: 70%"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="甲方联系电话:" prop="partyATelephone">
                <el-input
                  v-model="form.partyATelephone"
                  placeholder="请输入甲方联系电话"
                  style="width: 70%"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="乙方联系电话:" prop="partyBTelephone">
                <el-input
                  v-model="form.partyBTelephone"
                  placeholder="请输入乙方联系电话"
                  style="width: 70%"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="甲方联系地址:" prop="partyAAddress">
                <el-input
                  v-model="form.partyAAddress"
                  placeholder="请输入甲方联系地址"
                  style="width: 70%"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="乙方联系地址:" prop="partyBAddress">
                <el-input
                  v-model="form.partyBAddress"
                  placeholder="请输入乙方联系地址"
                  style="width: 70%"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card
          class="box-card"
          shadow="always"
          style="background: #fafafa; margin-top: 20px"
        >
          <template #header>
            <div class="card-header" style="padding-bottom: 4px">
              <span style="font-weight: 600">服务计划</span>
            </div>
          </template>
          <div>
            <el-table
              v-loading="loading"
              :data="form.servicePlanList"
              stripe
              border
              max-height="250"
            >
              <el-table-column
                label="序号"
                type="index"
                width="80"
                align="center"
              />
              <el-table-column
                label="服务项目"
                align="center"
                prop="serviceItemName"
              />
              <el-table-column
                label="单价（元）"
                align="center"
                prop="unitPrice"
              />
              <el-table-column label="单位" align="center">
                <template #default="scope">
                  <span>
                    {{
                      bed_uint.find((item) => item.value == scope.row.unit)
                        ? bed_uint.find((item) => item.value == scope.row.unit)
                            .label
                        : ""
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="社区站点佣金（元）"
                align="center"
                prop="commission"
              />
              <el-table-column label="服务频率" align="center">
                <template #default="scope">
                    <span>
                      {{
                        service_frequency.find(
                            (item) => item.value == scope.row.serviceFrequency,
                        )
                            ? service_frequency.find(
                                (item) =>
                                    item.value == scope.row.serviceFrequency,
                            ).label
                            : ""
                      }}
                    </span>
                </template>
              </el-table-column>
              <el-table-column
                label="服务次数"
                align="center"
                prop="serviceTimes"
              />
              <el-table-column label="备注" align="center" prop="notes" />
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template #default="scope">
                  <el-button link type="primary" @click="edit(scope.row)"
                    >查看服务时间</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <el-card
          class="box-card"
          shadow="always"
          style="background: #fafafa; margin-top: 20px"
        >
          <template #header>
            <div class="card-header" style="padding-bottom: 4px">
              <span style="font-weight: 600">合同详情</span>
            </div>
          </template>
          <div class="editor-box">
            <QuillEditor
              content-type="html"
              ref="myQuillEditor"
              theme="snow"
              v-model:content="form.content"
              :options="editorOption"
            >
            </QuillEditor>
          </div>
        </el-card>
        <el-card
          class="box-card"
          shadow="always"
          style="background: #fafafa; margin-top: 20px"
        >
          <template #header>
            <div class="card-header" style="padding-bottom: 4px">
              <span style="font-weight: 600">其他附件</span>
            </div>
          </template>
          <div>
            <el-upload
              style="width: 100%"
              v-model:file-list="fileList"
              class="upload-demo"
              :action="url"
              :headers="upload.headers"
              multiple
              :on-remove="handleRemove"
              :on-success="handleUploadSuccess"
              :limit="10"
            >
              <el-button type="primary" link :disabled="true"
                >添加附件</el-button
              >
            </el-upload>
          </div>
        </el-card>

        <el-card
          class="box-card"
          shadow="always"
          style="background: #fafafa; margin-top: 20px"
        >
          <template #header>
            <div class="card-header" style="padding-bottom: 4px">
              <span style="font-weight: 600">确认签字</span>
            </div>
          </template>
          <div style="display: flex; justify-content: space-between">
            <div style="display: flex; margin-left: 30px">
              <span style="color: red; display: inline-block; margin-top: 10px"
                >*</span
              ><span
                style="
                  margin-left: 5px;
                  display: inline-block;
                  margin-top: 10px;
                "
                >甲方:</span
              >
              <div
                style="
                  margin-left: 20px;
                  background: #ffffff;
                  border-radius: 10px;
                "
              >
                <el-image
                  style="width: 250px; height: 120px"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[form.partyASignatureUrl]"
                  :src="form.partyASignatureUrl"
                />
              </div>
            </div>
            <div style="display: flex; margin-right: 300px">
              <span style="color: red; display: inline-block; margin-top: 10px"
                >*</span
              ><span
                style="
                  margin-left: 5px;
                  display: inline-block;
                  margin-top: 10px;
                "
                >乙方:</span
              >
              <div
                style="
                  margin-left: 20px;
                  background: #ffffff;
                  border-radius: 10px;
                "
              >
                <el-image
                  style="width: 250px; height: 120px"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[form.partyBSignatureUrl]"
                  :src="form.partyBSignatureUrl"
                />
              </div>
            </div>
          </div>
        </el-card>
        <!--          <el-card-->
        <!--              class="box-card"-->
        <!--              shadow="always"-->
        <!--              style="background: #fafafa; margin-top: 15px"-->
        <!--          >-->
        <!--            <div style="text-align: right; padding-right: 50px">-->
        <!--              <el-button @click="goCancel">返 回</el-button>-->

        <!--            </div>-->
        <!--          </el-card>-->
      </el-form>
    </div>

    <el-dialog
      v-model="open"
      title="设置服务时间"
      append-to-body
      width="600px"
      v-if="open"
      @close="cancel"
      :close-on-click-modal="false"
    >
      <div>
        <el-table v-loading="loading" :data="postList" stripe border>
          <el-table-column
            label="序号"
            type="index"
            width="80"
            align="center"
          />
          <el-table-column label="日期" align="center">
            <template #default="scope">
              <span v-if="serviceFrequency == '1'">
                {{
                  plan_week.find((item) => item.value == scope.row.date)
                      ? plan_week.find((item) => item.value == scope.row.date)
                          .label
                      : ""
                }}
              </span>
              <span v-else-if="serviceFrequency == '2'">
                {{
                  plan_day.find((item) => item.value == scope.row.date)
                      ? plan_day.find((item) => item.value == scope.row.date)
                          .label
                      : ""
                }}
              </span>
              <span v-else>
                {{ scope.row.date }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="服务开始时间"
            align="center"
            prop="beginTime"
          />
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.contractAward_info {
  padding: 20px;
}
</style>
<script setup name="contractAward_info">
import { onMounted, ref } from "vue";
const { proxy } = getCurrentInstance();
const { sys_user_sex, bed_uint,service_frequency, plan_week, plan_day} = proxy.useDict("sys_user_sex", "bed_uint","service_frequency",
    "plan_week",
    "plan_day",);
import { useRouter, useRoute } from "vue-router";
import { QuillEditor, Quill } from "@vueup/vue-quill";
import QuillBetterTable from "quill-better-table";

import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { contractSignInfo } from "@/api/homebedsign";
import { getToken } from "@/utils/auth";

const router = useRouter();
const route = useRoute();
const loading = ref(false);
const open = ref(false);
const postList = ref(false);
const title = ref("新增/编辑适老化改造产品");
const serviceFrequency = ref("");
const fileList = ref([]);

const url = ref(process.env.VUE_APP_BASE_API + "/file/upload");
const upload = reactive({
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
});

const fontSize = Quill.import("attributors/style/size"); // 引入这个后样式写在style上
fontSize.whitelist = [
  false,
  "12px",
  "14px",
  "16px",
  "18px",
  "20px",
  "24px",
  "28px",
  "32px",
];
Quill.register(fontSize, true);

// 自定义字体类型
const fonts = [
  false,
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
  "宋体",
  "黑体",
];

const Font = Quill.import("attributors/style/font");
Font.whitelist = fonts;
Quill.register(Font, true);

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  // [{ align: [] }], // 对齐方式----- 手动展开[{ align: [] }]
  [{ align: "" }, { align: "center" }, { align: "right" }], // 对齐方式----- 默认展开
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ size: fontSize.whitelist }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  //fontSizeStyle.whitelist  ['small', false, 'large', 'huge']
  [{ font: Font.whitelist }], // 字体种类-----[{ font: [] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ direction: "ltl" }, { direction: "rtl" }], // 文本方向-----[{'direction': 'ltl'}]  [{'direction': 'rtl'}]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ color: [] }, { background: [] }, "blockquote", "code-block", "clean"], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  // ['blockquote'], //  引用  代码块-----['blockquote', 'code-block']
  // ['clean'], // 清除文本格式-----['clean']
  ["link", "image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
  // 插入表情

  // ['table']
];
const myQuillEditor = ref("");
const modules = ref({
  table: true, // disable table module
  "better-table": {
    operationMenu: {
      items: {
        unmergeCells: {
          text: "Another unmerge cells name",
        },
      },
      color: {
        colors: ["#fff", "red", "rgb(0, 0, 0)"], // colors in operationMenu
        text: "Background Colors", // subtitle
      },
    },
  },
  keyboard: {
    bindings: QuillBetterTable.keyboardBindings,
  },
});

const editorOption = ref({
  modules: {
    toolbar: toolbarOptions,
  },
  placeholder: "请输入内容",
});

const data = reactive({
  form: {},
  rules: {
    contractCode: [
      { required: true, message: "请输入合同编号", trigger: "blur" },
    ],
    contractTemplateId: [
      { required: true, message: "请选择合同模版", trigger: "change" },
    ],
    signTime: [
      { required: true, message: "请选择签订时间", trigger: "change" },
    ],
    beginTime: [
      { required: true, message: "请选择合同开始时间", trigger: "change" },
    ],
    endTime: [
      { required: true, message: "请选择合合同结束时间", trigger: "change" },
    ],
    partyA: [{ required: true, message: "请输入甲方", trigger: "blur" }],
    partyB: [{ required: true, message: "请输入乙方", trigger: "blur" }],
    partyATelephone: [
      { required: true, message: "请输入甲方联系电话", trigger: "blur" },
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "请输入正确的手机号码",
        trigger: "blur",
      },
    ],
    partyBTelephone: [
      { required: true, message: "请输入乙方联系电话", trigger: "blur" },
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "请输入正确的手机号码",
        trigger: "blur",
      },
    ],
    partyAAddress: [
      { required: true, message: "请输入甲方联系地址", trigger: "blur" },
    ],
    partyBAddress: [
      { required: true, message: "请输入乙方联系地址", trigger: "blur" },
    ],
  },
  ageReformItem: {},
});
const { form, rules, ageReformItem } = toRefs(data);

function cancel() {
  open.value = false;
  postList.value = [];
}

function edit(data) {
  open.value = true;
  serviceFrequency.value = data.serviceFrequency;
  postList.value = data.serviceTimeList;
}

function goCancel() {
  router.go(-1);
}

function handleRemove(files, fileList) {
  let arr = [];
  for (let i in fileList) {
    console.log(fileList[i]);
    if (fileList[i].response) {
      arr.push({
        name: fileList[i].response.data.name,
        attachmentUrl: fileList[i].response.data.url,
      });
    } else {
      arr.push({
        name: fileList[i].name,
        attachmentUrl: fileList[i].url,
      });
    }
  }
  form.value.contractSignAttachmentList = arr;
}
function handleUploadSuccess(res, file, fileList) {
  console.log("url", url.value);
  let arr = [];
  for (let i in fileList) {
    console.log(fileList[i]);
    if (fileList[i].response) {
      arr.push({
        name: fileList[i].response.data.name,
        attachmentUrl: fileList[i].response.data.url,
      });
    } else {
      arr.push({
        name: fileList[i].name,
        attachmentUrl: fileList[i].url,
      });
    }
  }
  form.value.contractSignAttachmentList = arr;
}

onMounted(() => {
  // const quill = toRaw(myQuillEditor.value).getQuill()
  console.log(myQuillEditor.value, "quill");
});

function getInfo(id) {
  contractSignInfo(id).then((res) => {
    form.value = res.contractSignDetail;
    form.value.homeBedApplyId = res.contractSignDetail.id;
    fileList.value = res.contractSignDetail.contractSignAttachmentList;
  });
}

const stopWatch = watch(
  () => route,
  (newVal, oldVal) => {
    if (newVal) {
      getInfo(newVal.params.id);
    }
  },
  { immediate: true },
);

onBeforeUnmount(() => {
  stopWatch();
});
</script>

<style scoped lang="scss">
// 富文本的高度调整
.editor-box {
  // border: 1px solid red;
  height: 350px;
  width: 100%;
  :deep(.ql-editor) {
    border: 1px solid #d1d5db;
    height: 276px;
  }

  :deep(.ql-container.ql-snow) {
    border: 1px solid #fff;
  }
}
</style>
<style>
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "字号";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "12px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: "24px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
  content: "28px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "正文" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "字体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  content: "Arial" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
  content: "SimSun" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
  content: "SimHei" !important;
}
.ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="Microsoft-YaHei"]::before {
  content: "微软雅黑" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  content: "Arial" !important;
}
.ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="Times-New-Roman"]::before {
  content: "罗马" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
  content: "楷体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  content: "sans-serif" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="宋体"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="宋体"]::before {
  content: "宋体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="黑体"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="黑体"]::before {
  content: "黑体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
  content: "仿宋" !important;
}
</style>
